<template>
  <van-popup v-model:show="data.showDate" round position="bottom" @closed="cancel">
    <van-date-picker ref="date" v-model="data.datetime" :min-date="minDate" :max-date="maxDate" :columns-type="type" @confirm="confirmDate" @cancel="data.showDate = false" />
  </van-popup>
</template>

<script setup lang="ts">
import { parseTime } from '@/utils'
//更新发送model
const emit = defineEmits(['confirm', 'update:modelValue'])
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  minDate: {
    type: Date,
    default: () => {
      return new Date(1990, 0, 1)
    }
  },
  maxDate: {
    type: Date,
    default: () => {
      return new Date(2035, 12, 30)
    }
  },
  type: {
    type: Array<any>,
    default: ['year', 'month', 'day']
  },
  formatterLast: {
    type: String,
    default: '{y}/{m}/{d}'
  }
})
interface Config {
  showDate: boolean
  yearColumns: Array<any>
  currentDate: string
  datetime: Array<string>
}
const data: Config = reactive({
  showDate: false,
  yearColumns: [],
  currentDate: '', //label
  datetime: [] //所选
})

const confirmDate = (val: any) => {
  // 确定
  data.showDate = false
  const Datestr = parseTime(val.selectedValues.join('/'), props.formatterLast) as string
  data.currentDate = Datestr
  emit('confirm', val, Datestr)
  emit('update:modelValue', false)
}
const cancel = () => {
  emit('update:modelValue', false)
}
//设置时间
watch(
  () => props.modelValue,
  newVal => {
    data.showDate = newVal
  },
  { immediate: true, deep: true }
)
</script>
